<template>
	<view :style="themeColor">
		<u-navbar title="预约/取号" @leftClick="leftClick" placeholder :leftIcon="leftIcon"></u-navbar>
		<view class="Wrapper">
			<Store :pageData="shopFind"></Store>
			<Coupons :pageData="coupons" :coupons_cate="coupons_cate"></Coupons>
			<take-num :Info="Info" :line_detail="line_detail" :pageData="shopFind" :shop_id="shop_id"
				@LineUpShop="LineUpShop"></take-num>

			<over-time :gifts="gifts" :pass="pass" :line_detail="line_detail" ref="countdown"
				v-if="gifts.length"></over-time>
			<take-evaluate :shop_id="shop_id"></take-evaluate>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import Store from './components/Store'
	import Coupons from './components/Coupons.vue'
	import TakeNum from './components/TakeNum'
	import OverTime from './components/OverTime'
	import TakeEvaluate from './components/TakeEvaluate'
	export default {
		components: {
			Store,
			Coupons,
			TakeNum,
			OverTime,
			TakeEvaluate
		},
		data() {
			return {
				fromShare: 0,
				shop_id: '', // 25845
				Info: '',
				shopFind: '',
				coupons: [],
				coupons_cate: [],
				line_detail: '',
				leftIcon: 'arrow-left',
				gifts: [],
				pass: '',
			}
		},
		onLoad(opt) {
			if (opt.shop_id) this.shop_id = opt.shop_id
			if (opt.fromShare) {
				this.fromShare = opt.fromShare
				this.leftIcon = 'home'
			}
			this.LineUpShop()
		},
		methods: {
			LineUpShop() {
				this.$http.get({
					url: '/LineUpApi/LineUpShop',
					data: {
						shop_id: this.shop_id
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					const result = res.data
					this.Info = result
					this.line_detail = result.line_detail
					this.shopFind = result.shopFind
					this.coupons_cate = result.coupons_cate || []
					this.coupons = result.coupons || []
					this.gifts = result.gifts || []
					this.pass = result.pass
				})
			},

			leftClick() {
				this.fromShare == 1 ? this.backHome() : this.$back()
			}
		},
		computed: {
			...mapGetters(['themeColor']),

		},
		onUnload() {
			if (this.$refs.countdown) {
				this.$refs.countdown.stopCountdown();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $page;
	}
</style>
<style lang="scss" scoped>
	page {
		background-color: $page;
	}

	.Wrapper {
		width: 710rpx;
		margin: 20rpx auto 0;
	}
</style>